<template>
    <div class="container">

    <div id="myChart" :style="{width: '700px', height: '500px',float:'left'}"></div>
    <div id="myChart2" :style="{width: '500px', height: '550px',float:'right'}"></div>
</div>
</template>
<script src="/vue.min.js"></script>
<script src="/vue-resource.min.js"></script>
<script>
import {getStatusApi,getSexApi} from "@/api/system/common"
import {TjfxScore,allTjfx} from "@/api/system/TJFX/resultTjfx"
export default {
  name: "user",
  
  data() {
    return {
      // 角色表格数据
      TJFXList: null,
      TJFXList2:null,
      
     // 查询参数
      queryParams: {
        page: 1,
        number: 10,
        name: undefined,
        status: undefined
      },};
  },
  created() {
    this.selectTJFX();  
    getStatusApi().then(data=>{ this.statusOptions = data.data;})
    getSexApi().then(data=>{ this.sexOptions = data.data;});},
  methods: {
    //柱状图
    selectTJFX(update){
      if(update){this.queryParams.page = 1;}
      allTjfx().then(data=>{
        this.TJFXList = data.data;
        //console.log(this.TJFXList);
    
        var datatemp = [];
         for (var i = 0; i < this.TJFXList.length; i++){
                datatemp.push({"value":this.TJFXList[i].id, "name":this.TJFXList[i].evalType})
               // console.log(datatemp)
            }
        //console.log(Name);
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title : {
              text: '参评人统计:1,学生；2，老师；3，教师互评；4，领导评价',
              subtext: '',
              x:'center'
            },    
          tooltip: {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
          legend: {
              orient: 'vertical',
              left: 'left',
              orient: 'vertical',  
              icon:"circle",
              
            },
          series: [{
            name: '评价人数',
            type: 'pie',
            radius : '55%',
            center: ['50%', '60%'],
            data: datatemp,
          backgroundStyle: {
            color: 'rgba(255, 0, 255, 1)'
          },
          itemStyle: {
               emphasis: {
                   shadowBlur: 10,
                   shadowOffsetX: 0,
                   shadowColor: 'rgba(255, 0, 255, 1)'
                         }
              } },]
         
        });
      })

       TjfxScore().then(data=>{
          this.TJFXList2 = data.data;
          //console.log(this.TJFXList2[2].userId);
          var name = [];
          var score = [];
          var datatemp = [];
          var Max = null;
          var x = null;
          for (var i = 0; i < this.TJFXList2.length; i++){
                name.push(this.TJFXList2[i].name);
                score.push(this.TJFXList2[i].score);
                //
                if(this.TJFXList2[0].score>this.TJFXList2[i].score){
                  Max = this.TJFXList2[0].score;
                  x=0
                  }else{
                    Max = this.TJFXList2[i].score
                    x = i
                  }
                  
                var ob = {name:"",value:""};
                ob.name = this.TJFXList2[i].name;
                ob.value = this.TJFXList2[i].score;
                datatemp.push(ob);
            }
            //console.log(Max);
           // console.log(score)
          let myChart2 = this.$echarts.init(document.getElementById('myChart2'))
        // 绘制图表
        myChart2.setOption({
          title: { text: '教师之星:' +this.TJFXList2[x].name },
          tooltip: {},
          xAxis: {
            data: name,
          },
          yAxis: {type: 'value',
          minInterval:1},
          series: [{
            type: 'bar',
             data:score,
             label:{
               normal:{
                    show:true,
                    textStyle:{color:"rgba(255, 255, 255, 1)"}//文字颜色
                }
              },
             itemStyle:{
                normal:{
                //柱状颜色
                color:function(params){
                    var colorList=['rgba(242, 155, 118, 1)','rgba(0, 160, 233, 1)'];
                     return colorList[params.dataIndex];
                 }
                }
             }}]
        });

       })

    
     

    }
    
  
  },
  //
     };
</script>